<template>
	<view class="content">
		<view class="block list-block">
			<template v-if="conversationList.length>0">
			<view v-for="item in conversationList" :key="item.conversationID" @tap="handleRoute(item.conversationID)">
				<TUI-conversation-item :data-type="item.type" :conversation="item"></TUI-conversation-item>
			</view>
			</template>
			<view v-else class="empty">暂无数据</view>
		</view>
	</view>
</template>

<script>
	import TUIConversationItem from '@/components/tui-conversation/conversation-item/index';
	import {
		isLogin
	} from '@/util/user';
	export default {
		data() {
			return {
				conversationList: [

				]
			}
		},
		components: {
			TUIConversationItem
		},
		methods: {
			handleRoute(id) {
				const url = `/page_other/chat/index?conversationID=${id}`;
				uni.navigateTo({
					url
				});
			},
			//获取会话列表
			getConversationList() {
				uni.$TUIKit.getConversationList({type:uni.$TUIKitTIM.TYPES.CONV_C2C}).then(res => {
					this.conversationList=[];
					this.$nextTick(()=>{
						this.conversationList=res.data.conversationList;
					})
				})
			}
		},
		onShow() {
			if (!isLogin()) {
				uni.showModal({
					title: '提示',
					content: '需要先登录！',
					cancelText: '先逛逛',
					confirmText: '去登录',
					success(res) {
						if (res.confirm) {
							uni.switchTab({
								url: '/pages/mine/index'
							})
						} else {
							uni.switchTab({
								url: '/pages/home/index'
							})
						}
					}
				})
				return false;
			}
			this.getConversationList()
		},
		onLoad() {
			uni.$TUIKit.on(uni.$TUIKitTIM.EVENT.CONVERSATION_LIST_UPDATED,this.getConversationList)
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding: 30rpx;

		.block {
			width: 100%;
			margin-bottom: 40rpx;
			position: relative;

			.search {
				width: 100%;
				height: 70rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				background: #F3F3F3;
				border-radius: 50rpx;
			}

			.iconfont.icon-sousuo {
				position: absolute;
				transform: translate(0, -50%);
				right: 10rpx;
				top: 50%;
				font-size: 42rpx;
				font-weight: bold;
				color: #999;
			}
		}

		.block.list-block {
			margin-bottom: 0;
			width: 100%;
			border-top: 1px solid #efefef;
			display: flex;
			flex-direction: column;
			overflow-y: scroll;

			.list-item {
				width: 100%;
				height: 130rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.user-photo {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #efefef;
					margin-left: 10rpx;
				}

				.info {
					width: calc(100% - 80rpx - 10rpx);
					height: 100%;
					padding: 20rpx;
					border-bottom: 1px solid #efefef;
					display: flex;
					flex-direction: column;
					position: relative;

					.user-name-block,
					.message-block {
						width: calc(100% - 80rpx);
						height: 50%;
						display: flex;
					}

					.user-name-block {
						flex-direction: row;
						align-items: center;

						.user-label,
						.time {
							font-size: 28rpx;
							color: #999;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.user-name {
							font-size: 30rpx;
							font-weight: bold;
							margin-right: 15rpx;
							white-space: nowrap;
						}

						.time {
							font-size: 26rpx;
							width: 240rpx;
							position: absolute;
							right: 0;
							top: 22rpx;
							text-align: right;
						}
					}

					.message-block {
						font-size: 28rpx;
						color: #999;
						margin-top: 6rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: block;
					}
				}
			}
		}
	}
</style>
